<template>
  <ElDialog
    title="打印预览"
    v-model="visible"
    width="100mm"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    scroll
    :max-height="700"
    :show-close="true">
    <div class="print-page-container" id="tableware-print">
      <table class="print-table">
        <tbody>
          <tr>
            <td>航司：{{ tablewareProducePlan?.airlineName || '-' }}</td>
            <td>航班：{{ tablewareProducePlan?.flightNo || '-' }}</td>
          </tr>
          <tr>
            <td>计划编号：{{ tablewareProducePlan?.planCode || '-' }}</td>
            <td>起飞时间：{{ tablewareProducePlan?.depTime || '-' }}</td>
          </tr>
          <tr>
            <td class="text-block">前舱配置</td>
            <td>总人数：{{ tablewareProducePlan?.frontCabinQty || '-' }}</td>
          </tr>
          <tr v-for="(item, index) in formatArray(tablewareProducePlan?.frontDetailList)" :key="index">
            <td>{{ item[0].supplyName }}：{{item[0].supplyQty}}{{ item[0].unitName }}</td>
            <td v-if="item[1]">{{ item[1].supplyName }}：{{item[1].supplyQty}}{{ item[1].unitName }}</td>
          </tr>
          <tr>
            <td class="text-block">中舱配置</td>
            <td>总人数：{{ tablewareProducePlan?.middleCabinQty || '-' }}</td>
          </tr>
          <tr v-for="(item, index) in formatArray(tablewareProducePlan?.middleDetailList)" :key="index">
            <td>{{ item[0].supplyName }}：{{item[0].supplyQty}}{{ item[0].unitName }}</td>
            <td v-if="item[1]">{{ item[1].supplyName }}：{{item[1].supplyQty}}{{ item[1].unitName }}</td>
          </tr>
          <tr>
            <td class="text-block">后舱配置</td>
            <td>总人数：{{ tablewareProducePlan?.rearCabinQty || '-' }}</td>
          </tr>
          <tr v-for="(item, index) in formatArray(tablewareProducePlan?.rearDetailList)" :key="index">
            <td>{{ item[0].supplyName }}：{{item[0].supplyQty}}{{ item[0].unitName }}</td>
            <td v-if="item[1]">{{ item[1].supplyName }}：{{item[1].supplyQty}}{{ item[1].unitName }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button @click="handlePrint" type="primary" :disabled="loading">打印</el-button>
    </template>
    </ElDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TablewareProducePlanApi, TablewareProducePlanVO } from '@/api/acm/tablewareproduceplan'
import { OnboardSupplyApi } from '@/api/acm/onboardsupply'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import printJS from 'print-js'
import { ElDialog } from 'element-plus'

const visible = ref(false)
const loading = ref(false)
const tablewareProducePlan = ref<any>({})
const simpleList = ref<any[]>([])

const props = defineProps({
  wareId: {
    type: Number,
    default: 0
  }
})

watch(() => props.wareId, (newId) => {
  if (newId) {
    visible.value = true
    loadData()
  }
})

const getSimpleList = async () => {
  try {
    const res = await OnboardSupplyApi.getOnboardSupplySimpleList({ category: 3, name: '' })
    simpleList.value = res
  } finally {
  }
}

const formatArray = (arr: any[]) => {
  const destArray = [] as any[]
  (arr || []).forEach((item, index) => {
    const idx = index % 2;
    if(destArray[idx]){
      (destArray[idx] as any []).push(item)
    } else{
      destArray[idx] = [item]
    }
  })
  return destArray
}

getSimpleList()

const loadData = async ()=>{
  loading.value = true
  const res = await TablewareProducePlanApi.getTablewareProducePlan(props.wareId)
  res.airlineName = getStrDictOptions(DICT_TYPE.PPLAN_AIRLINE_ID).find((item) => item.value == res.airlineComp)?.label || '-'
  res.frontDetailList = (res.frontDetailList || []).map((item) => {
    const supplyItem = simpleList.value.find((tItem) => tItem.id == item.supplyId)
    item.supplyName = supplyItem?.name || '-'
    item.unitName = supplyItem?.standardName
    return item
  })
  res.middleDetailList = (res.middleDetailList || []).map((item) => {
    const supplyItem = simpleList.value.find((tItem) => tItem.id == item.supplyId)
    item.supplyName = supplyItem?.name || '-'
    item.unitName = supplyItem?.standardName
    return item
  })
  res.rearDetailList = (res.rearDetailList || []).map((item) => {
    const supplyItem = simpleList.value.find((tItem) => tItem.id == item.supplyId)
    item.supplyName = supplyItem?.name || '-'
    item.unitName = supplyItem?.standardName
    return item
  })
  loading.value = false
  tablewareProducePlan.value = res
}

const handlePrint = () => {
  // 优化打印配置，确保针式打印机打印效果更好
  printJS({
    printable: 'tableware-print',
    type: 'html',
    targetStyles: ['*'],
    style: `
      @page {
        size: 60mm 80mm;
        padding: 15mm 2mm 0 2mm;
    }
    .print-page-container{
      width: 100%;
      box-sizing: border-box;
    }
    .print-table{
      width: 54mm;
      margin: 0 auto;
      font-size: 6pt;
      font-family: "Times New Roman", Times, serif !important;
      border-collapse: collapse;
      table-layout: fixed;
      border: 1px solid #000;
      text-align: left;
      word-break: break-word;
      font-weight: normal;
      box-sizing: border-box;
    }
    .print-table th,
    .print-table td {
      width: 50%;
      border: #000 1px solid;
      padding: 2px;
      box-sizing: border-box;
      word-wrap: break-word;
      overflow-wrap: break-word;
      font-weight: normal;
    }
    `,
    scanStyles: false,
    showModal: true,
    modalMessage: '正在准备打印...',
    font_size: '6pt',
  })
}

const open = ()=>{
  visible.value = true
}

defineExpose({
  open
})

</script>